<template>
    <div class="content">
        <header>
            <search-bar></search-bar>
        </header>
        <main>
            <div class="left">
                 <TabBar
                :tabBar="leftContent"
            >
            </TabBar>
            </div>
            <div class="right"></div>
        </main>
        <footer>
            <FooterBar></FooterBar>
        </footer>
    </div>
</template>

<script>
import SearchBar from './component/SearchBar'
    export default {
        name:'Classfy',
        components:{
            SearchBar
        },
        data() {
            return {
                leftContent: []
            }
        },
        created() {
            this.initData()
        },
        methods: {
         async initData() {
              const res = await this.$api.product.classfy();
              console.log(res.data.data,'=====')
              this.leftContent = res.data.data;
            },
        },
    }
</script>

<style lang="scss" scoped>
   .content {
       width: 100%;
       height: 100%;
       header {
           width: 100%;
           height: 44px;
       }
       main {
           width: 100%;
           height: auto;
           display: flex;
           overflow: auto;
           .left {
               width: 80px;
               height: 580px;
               text-align: center;
               /deep/.tab_bar {
                   width: 80px;
                   height: 580px;
                   /deep/.tab_bar_link {
                       width: 80px;
                   }
               }
           };
           .right {
               flex: 1;
           }
       }
       footer {
           width: 100%;
           height: 50px;
       }
   }
</style>